<script lang="ts" setup>
    import {reactive, ref} from "vue"; 
    type Props={
        MySty:string,
        msg:string
    }

    defineProps<Props>();
    // const emit = defineEmits(["testProps"]);
    const emit = defineEmits<{
        (e:"testProps",data:string):void,
        (e:"testProps2",id:number):void,
        (e:"testProps3",id:number):void
    }>()
    function fct(){
        emit("testProps","i3hxd");
        emit("testProps2",2);
        emit("testProps3",3)
    }
</script>

<template>
    <div>
        <input type="text" :class="MySty">
        <h1>{{ msg }}</h1>
        <button @click="fct">子组件触发</button>
    </div>
</template>

<style scoped>
    div{
        border: 1px dashed fuchsia;
        width: 250px;
        text-align: center;
        margin-bottom: 5px;
    }
    input{
        margin-top: 15px;
    }
    button{
        margin-bottom: 15px;
    }
    .border1{
        border: 1px solid red;
    }
    .border2{
        border: 3px solid black;
    }
</style>